<template>
  <el-row ref="radarWrap" class="secondMiddleWrap">
    <el-row style="height: calc(100% - 32px)">
      <CommonTable
        :data-list="dataList.slice((currentPage-1)*10,currentPage*10)"
        :header-list="headerList"
        :title="'纳管统计'"
        border
        style="width: 100%;background: rgba(24,66,107,0.59);"
      />
    </el-row>
    <el-row style="height: 26px;display: flex;justify-content: flex-end;margin-top: 10px">
      <el-pagination
        background
        small
        :page-size="10"
        :current-page="currentPage"
        layout="prev, pager, next"
        :total="dataList.length"
        @current-change="currentPageChange"
      >
      </el-pagination>
    </el-row>
  </el-row>
</template>

<script>
import CommonTable from '@c/CommonTable'
  export default {
    name: "SecondMiddle",
    components: {
      CommonTable
    },
    props: {
      dataList: {
        type: Array,
        default: ()=>[]
      },
    },
    data() {
      return {
        headerList: ['省份','纳管量','在线量','在线率','离线率'],
        currentPage: 1,
        totalNum: 0
      }
    },
    created() {
    },
    mounted() {
    },
    methods: {
      currentPageChange(val) {
        this.currentPage = val
      }
    }
  }
</script>

<style scoped>
.secondMiddleWrap{
  height: 60vh;
  background: rgba(0,33,135,0.24);
  border: 1px solid rgba(14,101,187,0.66);
  box-shadow: inset 0px 0px 50px 0px rgba(0,12,125,1);
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-content: space-between;
}
</style>

